<template>
	<div class="wrapper">
		<title-decorate titleName="设备监测"/>

		<div class="my-chart">
			<div class="shu-shui-bang">
				<equipment-animation class="equipment-animation" />
				<div class="connecting-line"></div>
				<img src="../../assets/images/home/shushuibang.svg"/>
				<div class="des-conent">
					<div class="head">
						<p>液位计</p>
					</div>
					<div class="content">
						<div class="content-item" v-for="item in meterList">
							<span>{{item.third_meter_name}}</span>
							<span>{{item.third_meter_data}}</span>
						</div>
					</div>
				</div>
			</div>
			<div
				v-for="item in equipmentInfo"
				:key="item.equipmentName"
				:class="item.equipmentType === 1 ? 'shu-shui-bang' : 'jiaya-shui-bang'"
			>
				<equipment-animation
					:class="
            item.equipmentType === 1
              ? 'equipment-animation'
              : 'equipment-animation1'
          "
				/>
				<div class="connecting-line"></div>
				<img :src="item.equipmentIcon"/>
				<div class="des-conent">
					<div class="head">
						<p v-text="item.equipmentName"></p>
						<span class="title">在线率</span>
						<span
							:class="item.equipmentType === 1 ? 'value' : 'value1'"
							v-text="item.equipmentOnlineRate"
						></span>
					</div>
					<div class="content">
						<div class="content-item">
							<span>所有设备</span>
							<span
								:id="`allEquipmentNum${item.equipmentType}`"
								v-text="formatter(item.allEquipmentNum)"
							></span>
						</div>
						<div class="content-item">
							<span>正常设备</span>
							<span
								:id="`normalEquipmentNum${item.equipmentType}`"
								v-text="formatter(item.normalEquipmentNum)"
							></span>
						</div>
						<div class="content-item">
							<span>异常设备</span>
							<span
								:id="`anomalyEquipmentNum${item.equipmentType}`"
								v-text="formatter(item.anomalyEquipmentNum)"
							></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import EquipmentAnimation from "../../components/EquipmentAnimation.vue";
import TitleDecorate from "../../components/TitleDecorate.vue";
import {
	numberRollingstart,
	thousandSeparator,
} from "../../commonjs/rollingNumber.js";

import {BigScreen} from "../../datastore/BigScreen";
export default {
	components: {TitleDecorate, EquipmentAnimation},
	props: {},
	data() {
		return {
			//设备信息
			equipmentInfo: [
				// {
				// 	equipmentName: "输水泵",
				// 	equipmentType: 1,
				// 	equipmentOnlineRate: "100%",
				// 	equipmentIcon: require("../../assets/images/home/shushuibang.svg"),
				// 	allEquipmentNum: 0,
				// 	normalEquipmentNum: 0,
				// 	anomalyEquipmentNum: 0,
				// },
				{
					equipmentName: "加压水泵",
					equipmentType: 2,
					equipmentOnlineRate: "0",
					equipmentIcon: require("../../assets/images/home/shuibang.svg"),
					allEquipmentNum: 0,
					normalEquipmentNum: 0,
					anomalyEquipmentNum: 0,
				},
			],
			meterList:[],
		};
	},
	watch: {
		equipmentInfo: {
			deep: true,
			handler(newVar) {
				newVar.forEach((item) => {
					numberRollingstart(
						item.allEquipmentNum,
						"allEquipmentNum" + item.equipmentType,
						10
					);
					numberRollingstart(
						item.normalEquipmentNum,
						"normalEquipmentNum" + item.equipmentType,
						10
					);
					numberRollingstart(
						item.anomalyEquipmentNum,
						"anomalyEquipmentNum" + item.equipmentType,
						5
					);
				});
			},
		},
	},
	computed: {},
	methods: {
		formatter: thousandSeparator,
	},
	created() {
	},
	mounted() {
		var that = this;
		new BigScreen(this).getMentRunStatus({},(res)=>{
			// that.equipmentInfo[0].equipmentOnlineRate = res.datas.ssb_online_rate;
			// that.equipmentInfo[0].allEquipmentNum = res.datas.ssb_count;
			// that.equipmentInfo[0].normalEquipmentNum = res.datas.ssb_run_count;
			// that.equipmentInfo[0].anomalyEquipmentNum = res.datas.ssb_no_run_count;

			that.equipmentInfo[0].equipmentOnlineRate = res.datas.jysb_online_rate;
			that.equipmentInfo[0].allEquipmentNum = res.datas.jysb_count;
			that.equipmentInfo[0].normalEquipmentNum = res.datas.jysb_run_count;
			that.equipmentInfo[0].anomalyEquipmentNum = res.datas.jysb_no_run_count;

		})
		new BigScreen(this).getMeterList({},(res)=>{
			that.meterList = res.datas;

		})
	},
};
</script>
<style lang="scss" scoped>
.wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

	.my-chart {
		width: 100%;
		flex: 1;

		.jiaya-shui-bang .des-conent {
			margin-top: 0px !important;
		}

		.shu-shui-bang,
		.jiaya-shui-bang {
			width: 100%;
			height: 50%;
			position: relative;

			.equipment-animation {
				position: absolute;
				margin-left: -60px;
				margin-top: -50px;
				transform: scale(0.4);
			}

			.equipment-animation1 {
				position: absolute;
				margin-left: -60px;
				margin-top: -50px;
				transform: scale(0.4);
			}

			.connecting-line {
				position: absolute;
				background: #a3a9af;
				width: 38px;
				height: 1px;
				transform: translate(70px, 16px) rotate(-55deg);
			}

			img {
				position: absolute;
				transform: translate(33px, 42px);
			}

			.des-conent {
				height: 100%;
				margin-top: 20px;
				border-top: 1px solid #a3a9af;
				margin-left: 100px;

				.head {
					height: 32%;
					display: flex;
					align-items: center;
					padding: 0 15px;
					box-sizing: border-box;

					p {
						font-size: 16px;
						color: #ffffff;
						flex: 1;
					}

					.title {
						font-size: 12px;
						color: #ffffff;
					}

					.value {
						font-size: 18px;
						font-weight: 600;
						color: #00c9ff;
						margin-left: 5px;
					}

					.value1 {
						font-size: 18px;
						font-weight: 600;
						color: #ff9d0a;
						margin-left: 5px;
					}
				}

				.content {
					height: 64%;
					display: flex;
					align-items: center;
					justify-content: center;

					.content-item {
						display: flex;
						flex: 1;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						span{
							width: 75px;
						}
						span:nth-child(1) {
							font-size: 12px;
							color: #ffffff66;
						}

						span:nth-child(2) {
							font-size: 24px;
							height: 41px;
							line-height: 41px;
							font-family: "lyndon";
							text-shadow: 0px 1px 2px rgba(140, 101, 0, 0.1);
							background: linear-gradient(180deg, #eeeeee 0%, #00c9ff 100%);
							background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}
			}
		}
	}
}
</style>